<template>
    <div id="statistics">
        <div class="display" v-loading="loading_display">
            <div class="display-item">
                <p class="display-title">今日访问量</p>
                <p class="display-value">{{count.day}}</p>
            </div>
            <div class="display-item">
                <p class="display-title">近7天访问量</p>
                <p class="display-value">{{count.week}}</p>
            </div>
            <div class="display-item">
                <p class="display-title">近30天访问量</p>
                <p class="display-value">{{count.month}}</p>
            </div>
            <div class="display-item">
                <p class="display-title">总访问量</p>
                <p class="display-value">{{count.total}}</p>
            </div>
        </div>
        <div class="chart">
            <div style="display: flex;align-items: flex-end">
                <div style="font-size: 18px;font-weight: 500;margin-right: 10px">访问量走势</div>
                <div>
                    <span id="span1" class="days active" style="border-right: 1px solid #999" @click="sevenDaysVisit">最近7天</span>
                    <span id="span2" class="days" @click="thirtyDaysVisit">最近30天</span>
                </div>
            </div>
            <ECharts class="chart-body" :option="option" v-loading="loading_chart"></ECharts>
        </div>
    </div>
</template>

<script>

    //这部分是按需引入echarts组件，避免全局引入导致包体积过大
    import ECharts from 'vue-echarts'
    import * as echarts from 'echarts/core';
    import {
        TitleComponent,
        ToolboxComponent,
        TooltipComponent,
        GridComponent,
        LegendComponent
    } from 'echarts/components';
    import { LineChart } from 'echarts/charts';
    import { UniversalTransition } from 'echarts/features';
    import { CanvasRenderer } from 'echarts/renderers';
    echarts.use([
        TitleComponent,
        ToolboxComponent,
        TooltipComponent,
        GridComponent,
        LegendComponent,
        LineChart,
        CanvasRenderer,
        UniversalTransition
    ]);


    export default {
        name: "Statistics",
        components: {ECharts},
        data() {
            return {
                loading_display:true,
                loading_chart:true,
                count:{},
                option: {
                    tooltip: {
                        trigger: 'axis'
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: []
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name: '访问量',
                            type: 'line',
                            stack: 'Total',
                            data: []
                        }
                    ]
                }
            };
        },
        methods: {
            sevenDaysVisit(){
                this.loading_chart = true
                this.$axios.get('/visit/daysCount/7').then(res=>{
                    this.loading_chart = false
                    this.option.xAxis.data = res.data.data.date;
                    this.option.series[0].data = res.data.data.count;
                    document.getElementById('span1').setAttribute('class','days active')
                    document.getElementById('span2').setAttribute('class','days')
                })
            },
            thirtyDaysVisit(){
                this.loading_chart = true
                this.$axios.get('/visit/daysCount/30').then(res=>{
                    this.loading_chart = false
                    this.option.xAxis.data = res.data.data.date;
                    this.option.series[0].data = res.data.data.count;
                    document.getElementById('span1').setAttribute('class','days')
                    document.getElementById('span2').setAttribute('class','days active')
                })
            }
        },
        created() {
            this.loading_display = true
            this.$axios.get('/visit/count').then(res=>{
                this.count = res.data.data;
                this.loading_display = false
            })
            this.sevenDaysVisit()
        }
    }
</script>

<style scoped>
    #statistics{
        margin: 0 auto 20px auto;
        max-width: 960px;
    }
    .display{
        display: flex;
        justify-content: space-around;
        background-color: white;
        padding: 20px;
    }
    .display-item{
        text-align: center;
    }
    .display-title{
        font-size: 14px;
        opacity: 0.6;
    }
    .display-value{
        font-size: 20px;
        opacity: 0.6;
        margin-bottom: 10px;
    }
    .chart{
        margin-top: 30px;
        padding: 20px;
        background-color: white;
        height: 360px;
        max-width: 920px;
    }
    .chart-body{
        height: 300px;
    }
    .days{
        font-size: 12px;
        opacity: 0.6;
        cursor: pointer;
        padding: 0 8px;
    }
    .days:hover{
        color: #409EFF;
        opacity: 0.8;
    }
    .active{
        color: blue;
    }
</style>
